<template>
    <el-card>
        <div slot="header" class="clearfix">
        <span>
            打卡记录
        </span>
    </div>
    
    <div style="margin-left:790px;margin-bottom: 10px;">
        <el-select v-model="value" placeholder="请选择"  style="width:150px">
            <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
        </el-select>
      
            <el-input  v-model="searchValue"  placeholder="输入关键字搜索" style="width: 200px;" />
   
   
            <el-button @click="search" style="width:80px">搜索</el-button>
   
        </div>
    
    <div>
        <el-table :data="fillterAndPageData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column prop="sex" label="性别" width="100"></el-table-column>
            <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
            <el-table-column prop="temperature" label="体温" width="100"></el-table-column>
            <el-table-column prop="situation" label="是否到达过高风险地区" width="170"></el-table-column>
            <el-table-column prop="healthy" label="健康状况" width="100"
            >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.healthy === '健康' ?  'success':'danger' "
          disable-transitions>{{scope.row.healthy}}</el-tag>
         
      </template>
        </el-table-column>
            <el-table-column prop="dakatime" label="打卡时间" width="150"></el-table-column>
            <el-table-column prop="dakalocal" label="打卡地点" width="150"></el-table-column>
            <el-table-column prop="dormitory" label="宿舍" width="100"></el-table-column>
            <el-table-column prop="className" label="班级" width="100"></el-table-column>
            <el-table-column prop="college" label="专业" width="120"></el-table-column>
            <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleEdit(scope.row.id)">删除</el-button>
                        
                        
                    </template>
                    
                </el-table-column>
        </el-table>
        
    <el-pagination
     
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[6,8,10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
  
    </div>
    </el-card>
</template>

<script>
    export default{
        data(){
            return {
            fillterAndPageData: [],
            pageSize:'',
            pageNumber:'',
            total:'',
            searchValue:'',
            options: [{
          value: '选项1',
          label: '姓名'
        }, {
          value: '选项2',
          label: '专业'
        }],
        value:''
       
            
        }
    },
    created(){
         this.query() 
        },
    methods: {
        handleCurrentChange(pageNumber) {
      
      this.pageNumber=pageNumber;
      console.log(pageNumber);
      this.query()
     
      
    },
    handleSizeChange(pageSize) {
     
      this.pageSize=pageSize;
      console.log(pageSize);
      this.query()
      
    },
        query(){
            fetch("http://1.15.134.100:9999/daka?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize+"&searchValue="+this.searchValue,{
                method:"GET",
                headers:{
                    'token': localStorage.getItem('token'),
                },
            }
            )
            .then(res => res.json()).then(res =>{
                this.fillterAndPageData=res.data.list
              this.total=  res.data.total

            })
        },
          handleEdit(id){
               console.log(id);
               fetch("http://1.15.134.100:9999/daka/"+id,{
                method:"delete",
                headers:{
                    'token': localStorage.getItem('token'),
                },
               }).then((response)=> response.json())
               .then((data)=>{
                console.log(data);
                alert("删除成功");
                this.$router.go(0);
               });
               for (let i = 0; i < this.tableData.length; i++) {
                if (this.fillterAndPageData[i].id === id) {
                    this.fillterAndPageData.splice(i, 1);
                    
                    break;
                   
                }
            }
          },
          search(){
            this.searchValue=this.searchValue;
            console.log(this.searchValue)
            this.query()
          }

         
     
        
    }
    }
</script>
<style>
.clearfix {
    display: flex;
   

}


.el-pagination{
    margin-left: 850px;
}



</style>